<template>
  <div class="profile">
    <div class="head">
      <router-link to="/Set">
        <van-icon class="set" name="setting-o" size="25" color="#fff"  />
      </router-link>
      <div class="r">
        <van-icon class="service" name="service-o" size="25" color="#fff" />
        <van-icon class="message" name="chat-o" size="25" color="#fff" />
      </div>
      <div class="head-photo">
        <van-image
          round
          width="14.133vw"
          height="14.133vw"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div class="text">
        <h3>用户名</h3>
        <p>
          <span>等级:</span>小蜜粉
          <span style="margin-left:3.467vw;">蜜粉值:</span>0
        </p>
        <span class="tq">
          <van-icon class="vip" name="gem-o" />我的特权
        </span>
      </div>
    </div>
    <div class="indent">
      <p>
        <strong>订单中心</strong>
        <router-link to="/Indent">
          <span>
            全部订单
            <van-icon class="arrow" name="arrow" />
          </span>
        </router-link>
      </p>
      <van-tabbar class="indent-xx">
        <van-tabbar-item name="home" icon="paid">待付款</van-tabbar-item>
        <van-tabbar-item name="search" icon="send-gift-o">代发货</van-tabbar-item>
        <van-tabbar-item name="friends" icon="logistics">待收货</van-tabbar-item>
        <van-tabbar-item name="setting" icon="notes-o">待评价</van-tabbar-item>
        <van-tabbar-item name="tuikuan" icon="after-sale">退款/售后</van-tabbar-item>
      </van-tabbar>
    </div>

    <div class="fun">
      <ul class="yhj">
        <li>
          <div>
            <b>0</b> 张
          </div>
          <span>优惠卷</span>
        </li>
        <li>
          <div>
            <b>0</b> 个
          </div>
          <span>红包</span>
        </li>
      </ul>
      <i class="i"></i>
      <ul class="help">
        <li>
          <div>
            <van-icon name="balance-o" size="4.8vw" color="#79c2f9" />
          </div>
          <span>钱包</span>
        </li>
        <li>
          <div>
            <van-icon name="question-o" size="4.8vw" color="#79c2f9" />
          </div>
          <span>帮助与客服</span>
        </li>
      </ul>
    </div>

    <div class="tcc" >
      <van-cell-group>
        <van-cell is-link @click="showPopup">我的拼团</van-cell>
        <van-cell is-link @click="showPopup">出行订单</van-cell>
        <van-cell is-link @click="showPopup">我的收藏</van-cell>
        <van-cell is-link @click="showPopup">浏览记录</van-cell>
      </van-cell-group>
      <van-popup
          v-model="show"
          closeable
          close-icon-position="top-left"
          position="bottom"
          class="popup"
          :style="{ height: '100%' }"
        >
        <popup />
      </van-popup>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import Popup from '../../components/popup'
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    showPopup() {
      console.log(1111111);
      this.show = true;
    }
  },
  components: {
    Popup,
  },
};
</script>

<style lang="stylus" scoped>
.popup{
  background #fbfbfb
}
.profile {
  background: #f6f6f6;
  height: 177.867vw;
  position absolute
  left 0
  top 0
  width  100%
}

.head {
  height: 50.2vw;
  width: 100%;
  background: #529efc;
  position: relative;
}

.set {
  position: relative;
  left: 3.733vw;
  top: 5.867vw;
}

.r {
  position: relative;
  top: -2.4vw;
  margin-right: 3.467vw;
}

.service, .message {
  float: right;
  margin-left: 5.333vw;
}

.head-photo {
  position: absolute;
  top: 18.133vw;
  left: 5.333vw;
  right: 3.2vw;
}

.text {
  position: absolute;
  left: 24vw;
  top: 20vw;
  color: pink;
}

.text span {
  color: #fff;
}

.text span.tq {
  display: inline-block;
  width: 21.667vw;
  background: #156dc5;
  border-radius: 2.667vw;
  line-height: 5.333vw;
  color: #fff;
  font-size: 3.2vw;
  position: absolute;
  bottom: 5.333vw;
  right: -30.133vw;
}

.text .vip {
  margin: 0vw 1.6vw;
  color: #ffb103;
  display: inline-block;
  line-height: 5.333vw;
  position: relative;
  top: 0.267vw;
}

.indent {
  width: 93.333vw;
  height: 30.4vw;
  border-radius: 2.667vw;
  background: #ffffff;
  position: relative;
  left: 3.467vw;
  top: -13.333vw;
}

.indent p {
  padding: 0 2.667vw;
  line-height: 12.8vw;
  border-bottom: 0.267vw solid #f4f4f4;
}

.indent p strong {
  font-size: 4vw;
}

.indent p span {
  float: right;
  font-size: 3.2vw;
  color: #939393;
}

.indent .arrow {
  position: relative;
  top: 0.4vw;
}

.indent .indent-xx {
  position: absolute;
  left: 0;
  top: 14.667vw;
}

.fun {
  display: flex;
  width: 93.333vw;
  height: 16.533vw;
  background: #ffffff;
  border-radius: 2.667vw;
  position: relative;
  left: 3.467vw;
  top: -11.733vw;
  justify-content: space-between;
}

.fun ul li {
  margin: 0 6.667vw;
}

.fun ul li span {
  font-size: 3.2vw;
  color: #575757;
}

.fun i.i {
  display: inline-block;
  width: 0.533vw;
  height: 9.067vw;
  background: #f4f4f4;
  margin: 4vw 0;
}

.fun ul.yhj li {
  float: left;
  text-align: center;
  margin-top: 2.667vw;
}

.fun ul.help li {
  float: right;
  text-align: center;
  margin-top: 2.667vw;
}

.tcc {
  width: 93.333vw;
  border-radius: 2.667vw;
  height: 46.133vw;
  position: relative;
  left: 3.467vw;
  top: -8.533vw;
  overflow: hidden;
}
</style>